userWidget: Allow vertical orientation for user avatars

Allow vertical orientation for the userWidget so that the user-avatar
can be centered and user's name can be placed below it. The plan
for 3.36 is to use this vertical userWidget layout for both lock
and login screen.

The userWidget is also used while creating the user-selection list
at the login, hence we still need to keep the horizontal layout
for userWidget in place.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/922

diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index b0ee8ccc07c77588e8fa29d648c660835e86f0f7..536f635becd9c0779c4ad126a757bd63a8964fc1 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -113,20 +113,27 @@
   &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
 }
 
-.login-dialog-username,
 .user-widget-label {
   color: $osd_fg_color;
+}
+
+.user-widget.horizontal .user-widget-label {
   @include fontsize($base_font_size + 2);
   font-weight: bold;
   text-align: left;
   padding-left: 15px;
-}
 
-.user-widget-label {
   &:ltr { padding-left: 14px; }
   &:rtl { padding-right: 14px; }
 }
 
+.user-widget.vertical .user-widget-label {
+  @include fontsize($base_font_size + 5);
+  text-align: center;
+  font-weight: normal;
+  padding-top: 16px;
+}
+
 .login-dialog-prompt-layout {
   padding-top: 24px;
   padding-bottom: 12px;
@@ -148,4 +155,4 @@
   color: darken($osd_fg_color,30%);
   &:hover,&:focus { color: $osd_fg_color; }
   &:active { color: darken($osd_fg_color, 50%); }
-}
\ No newline at end of file
+}

diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 296632b33f005d48d019fb35901637d2cfb202e0..38716734994460da402380febc6ec4fffa915808 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -37,6 +37,14 @@
   }
 }
 
+.user-widget.vertical .user-icon {
+  icon-size: 128px;
+}
+
+.user-widget.horizontal .user-icon {
+  icon-size: 64px;
+}
+
 // Input Source Switcher
 .input-source-switcher-symbol {
   font-size: 34pt;

diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index 4c0f8d23fae48993901b91d4ef2d2edf1b374255..96e9e5559494fd3140313eb79bde43940b0537f6 100644 (file)
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -47,6 +47,8 @@ var AuthPrompt = GObject.registerClass({
         super._init({
             style_class: 'login-dialog-prompt-layout',
             vertical: true,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
         });
 
         this.verificationStatus = AuthPromptStatus.NOT_VERIFYING;
@@ -455,8 +457,7 @@ var AuthPrompt = GObject.registerClass({
             oldChild.destroy();
 
         if (user) {
-            let userWidget = new UserWidget.UserWidget(user);
-            userWidget.x_align = Clutter.ActorAlign.START;
+            let userWidget = new UserWidget.UserWidget(user, Clutter.Orientation.VERTICAL);
             this._userWell.set_child(userWidget);
         }
     }

diff --git a/js/ui/userWidget.js b/js/ui/userWidget.js
index 03d4d6388f1cede4ee9f0aa8bdcc99585d926871..22446510a46e35b4da233bc1475b9b4ec65940c2 100644 (file)
--- a/js/ui/userWidget.js
+++ b/js/ui/userWidget.js
@@ -7,6 +7,7 @@ const { Clutter, GLib, GObject, St } = imports.gi;
 
 const Params = imports.misc.params;
 
+const UNKNOWN_AVATAR_ICON_SIZE = -1;
 var AVATAR_ICON_SIZE = 64;
 
 // Adapted from gdm/gui/user-switch-applet/applet.c
@@ -18,9 +19,11 @@ var Avatar = GObject.registerClass(
 class Avatar extends St.Bin {
     _init(user, params) {
         let themeContext = St.ThemeContext.get_for_stage(global.stage);
-        params = Params.parse(params, { reactive: false,
-                                        iconSize: AVATAR_ICON_SIZE,
-                                        styleClass: 'user-icon' });
+        params = Params.parse(params, {
+            styleClass: 'user-icon',
+            reactive: false,
+            iconSize: UNKNOWN_AVATAR_ICON_SIZE,
+        });
 
         super._init({
             style_class: params.styleClass,
@@ -44,6 +47,23 @@ class Avatar extends St.Bin {
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
+    vfunc_style_changed() {
+        super.vfunc_style_changed();
+
+        let node = this.get_theme_node();
+        let [found, iconSize] = node.lookup_length('icon-size', false);
+
+        if (!found)
+            return;
+
+        let themeContext = St.ThemeContext.get_for_stage(global.stage);
+
+        // node.lookup_length() returns a scaled value, but we
+        // need unscaled
+        this._iconSize = iconSize / themeContext.scaleFactor;
+        this.update();
+    }
+
     _onDestroy() {
         if (this._scaleFactorChangeId) {
             let themeContext = St.ThemeContext.get_for_stage(global.stage);
@@ -52,28 +72,40 @@ class Avatar extends St.Bin {
         }
     }
 
+    _getIconSize() {
+        if (this._iconSize !== UNKNOWN_AVATAR_ICON_SIZE)
+            return this._iconSize;
+        else
+            return AVATAR_ICON_SIZE;
+    }
+
     setSensitive(sensitive) {
         this.reactive = sensitive;
     }
 
     update() {
+        let iconSize = this._getIconSize();
+
         let iconFile = this._user.get_icon_file();
         if (iconFile && !GLib.file_test(iconFile, GLib.FileTest.EXISTS))
             iconFile = null;
 
         if (iconFile) {
             this.child = null;
+
             let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
             this.set_size(
-                this._iconSize * scaleFactor,
-                this._iconSize * scaleFactor);
+                iconSize * scaleFactor,
+                iconSize * scaleFactor);
             this.style = `
                 background-image: url("${iconFile}");
                 background-size: cover;`;
         } else {
             this.style = null;
-            this.child = new St.Icon({ icon_name: 'avatar-default-symbolic',
-                                       icon_size: this._iconSize });
+            this.child = new St.Icon({
+                icon_name: 'avatar-default-symbolic',
+                icon_size: iconSize,
+            });
         }
     }
 });
@@ -159,14 +191,23 @@ class UserWidgetLabel extends St.Widget {
 
 var UserWidget = GObject.registerClass(
 class UserWidget extends St.BoxLayout {
-    _init(user) {
-        super._init({ style_class: 'user-widget', vertical: false });
-
+    _init(user, orientation = Clutter.Orientation.HORIZONTAL) {
         this._user = user;
 
+        let vertical = orientation == Clutter.Orientation.VERTICAL;
+        let xAlign = vertical ? Clutter.ActorAlign.CENTER : Clutter.ActorAlign.START;
+        let styleClass = vertical ? 'user-widget vertical' : 'user-widget horizontal';
+
+        super._init({
+            styleClass,
+            vertical,
+            xAlign,
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._avatar = new Avatar(user);
+        this._avatar.x_align = Clutter.ActorAlign.CENTER;
         this.add_child(this._avatar);
 
         this._label = new UserWidgetLabel(user);